<template>
  <div class="box">
    <el-row class="tac">
      <el-col class="menu" :span="4">
        <el-menu
          active-text-color="orange"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="activeIndex"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
          <personal-data></personal-data>
          <div v-for="item in $menuStore.list" :key="item._id">
            <el-sub-menu v-if="item.list?.length" :index="item._id">
              <template #title>
                <span class="spanBlock"
                  ><el-icon><icon-menu /></el-icon>{{ item.name }}</span
                >
              </template>
              <el-menu-item v-for="item2 in item.list" :key="item2.id" :index="item2.id">
                <span class="spanBlock"
                  ><a :href="'#/main' + item2.path"
                    ><el-icon><icon-menu /></el-icon>{{ item2.name }}</a
                  ></span
                >
              </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-if="!item.list?.length" :index="item._id">
              <span class="spanBlock"
                ><a :href="'#/main' + item.path"
                  ><el-icon><icon-menu /></el-icon>{{ item.name }}</a
                ></span
              >
            </el-menu-item>
          </div>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <div class="header">头部</div>
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUpdated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useMenuStore } from '../stores/counter'
import { Menu as IconMenu } from '@element-plus/icons-vue'
import PersonalData from '@/components/PersonalData.vue'
import * as i18n from '@/i18n';

let $menuStore = useMenuStore()
let $router = useRouter() //全局路由
let $route = useRoute() //单个路由

let activeIndex = ref('')

if (!$menuStore.list.length) {
  $router.push('/')
} else {
  let path = $route.path
  let findList = $menuStore.list.filter((item: any) => '/main' + item.path == path)
  if (findList.length) {
    activeIndex.value = findList[0]['_id']
  } else {
    let findList1: any = ref()
    $menuStore.list.forEach((item: any) => {
      if (item.list) {
        if (item.list?.filter((item2: any) => '/main' + item2.path == path).length) {
          findList1 = item.list?.filter((item2: any) => '/main' + item2.path == path)
        }
      }
    })

    if (findList1?.length) {
      activeIndex.value = findList1[0]['id']
    } else {
      activeIndex.value = $menuStore.list[0]['_id']
    }
  }
}
console.log(activeIndex.value)

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 8%;
  background: green;
}
.spanBlock {
  display: block;
  width: 100%;
  height: 100%;
  a {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.menuItem {
  position: relative;
  // .menuEl{
  //   position: absolute;
  //   top:150px;
  //   left: 0;
  //   z-index:100
  // }
}
</style>
